<template>
  <!-- 下拉菜单弹窗 -->
  <view>
    <!-- 蒙层 -->
    <view
      v-if="props.show"
      class="custom-overlay"
      @click="emits('close')"
    ></view>
    <!-- 弹窗内容 -->
    <view v-show="props.show">
      <view :class="['custom-modal', props.className]">
        <view class="custom-content">
          <view class="custom-content-title" v-if="props.userInfo != null">
            <!-- 头像 -->
            <view class="custom-header-avatar">
              <acatar
                :size="74"
                :title="props.userInfo?.name"
                :img="props.userInfo?.share.avatar?.thumbnail"
              />
            </view>
          </view>
          <view class="custom-content-body">
            <view v-for="(item, index) in props.list" :key="index">
              <tm-divider />
              <view
                class="custom-content-item"
                @click="emits('menuClick', item.value)"
              >
                <tm-icon :font-size="26" :name="item.icon"></tm-icon>
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import acatar from '../header/acatar.vue'
import { IPerson } from '@/ts/core/target/person'

type listType = {
  icon: string
  name: string
  value: string
}

type Props = {
  show: boolean
  userInfo?: IPerson
  className: 'leftTop' | 'rightTop' | 'center'
  list: listType[]
}
const props = defineProps<Props>()

const emits = defineEmits(['close', 'menuClick'])
</script>

<style lang="scss">
/* 蒙层样式 */
.custom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
  z-index: 999; /* 设置在最顶层 */
}

/*  #ifdef H5   */
.leftTop {
  position: fixed;
  top: 6%;
  left: 4%;
}
/*  #endif  */

/*  #ifndef H5   */
.leftTop {
  position: fixed;
  top: 18%;
  left: 3%;
}
/*  #endif  */
.rightTop {
  position: fixed;
  top: 18%;
  right: 3%;
}
/*  #ifdef H5 || MP-ALIPAY   */
.center {
  position: fixed;
  top: 25%;
  left: 7%;
  transition: translate(-50%, -25%);
}
/*  #endif  */

/*  #ifdef MP-WEIXIN   */
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transition: translate(-50%, -50%);
}
/*  #endif  */
.custom-modal {
  max-width: 80vw;
  min-width: 40vw;
  background-color: #fff;
  padding: 20rpx 20rpx 20rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 1000; /* 设置在蒙层之上 */
  .custom-content {
    .custom-content-title {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
    }
    .custom-content-body {
      .custom-content-item {
        display: flex;
        align-items: center;
        gap: 15rpx;
        font-size: 26rpx;
      }
    }
  }
}
</style>
